<template>
    <div style="width: 100%;">
    <yk-affix :offset="80" @change="toolbarTop" style="width: 100%;">
        <Toolbar class="toolbar" :class="{ 'istop': top }" :editor="editorRef" :defaultConfig="toolbarConfig" />
    </yk-affix>
  
    <div class="editor_main">
        <Forms style="width: 90%;" :classify="0" @formData="formData" :artData="props.artData" :submit="props.submit" />
        <div class="edit">
            <Editor v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleCreated" @onChange="onChange" />
        </div>
    </div>
      </div>
</template>
<script lang="ts" setup>
// import '@wangeditor/editor/dist/css/style.css' 
//index.less是在@wangeditor/editor/dist/css/style.css这个的基础上进行的修改的样式
import './index.less'
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Forms from '../forms/forms.vue';
import { colors } from './colors'
import { uploadFileApi } from '../../api/file_api';
import { baseImgPath } from '../../utils/env';
import type { IToolbarConfig, IEditorConfig } from '@wangeditor/editor'

const emit = defineEmits(['formData', 'centent'])
const props = defineProps({
    artData: {
        type: Object,
        default: () => ({})
    },
    submit: {
        type: Boolean,
        default: false
    }
})



//工具栏固定
const top = ref<boolean>(false)
const toolbarTop = (value: boolean) => {
    top.value = value
}
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
watch(
    () => props.artData,
    () => {
        valueHtml.value = props.artData.content
    }
)


//获得form内容
const formData = (value: any) => {
    emit('formData', value)
}
const centent = (value: any) => {
    emit('centent', value)
}
//获取内容
const onChange = () => {

}
//菜单配置
const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容',
    MENU_CONF: {
        color: {
            colors,
        },
        bgColor: {
            colors,
        },
        uploadImage: {
            async customUpload(file: File, insertFn: any) {
                const formData = new FormData()
                formData.append('file', file)
                uploadFileApi(formData).then((res) => {
                    let imgName = res.data.data.url
                    let url = baseImgPath + '/' + imgName // 图片的 URL
                    // 上传成功后，获取到图片的 URL ，并插入到编辑器中
                    insertFn(url, imgName, url)
                })
            }
        },
    }
}

/* 工具栏配置 */
const toolbarConfig: Partial<IToolbarConfig> = {  // TS 语法
    toolbarKeys: [
        "blockquote",
        "headerSelect",
        "bold",
        "underline",
        "through",
        "italic",
        "color",
        "bgColor",
        "clearStyle",
        "bulletedList",
        "numberedList",
        "todo",
        // 菜单组，包含多个菜单
        {
            key: 'group-indent', // 必填，要以 group 开头
            title: '缩进', // 必填
            iconSvg: '<svg>....</svg>', // 可选
            menuKeys: ["indent", "delIndent"], // 下级菜单 key ，必填
        },
        "|",
        "emotion",
        "insertLink",
        // 'insertImage',
        "uploadImage",
        "insertVideo",
        "insertTable",
        "code",
        "codeBlock",
    ]
}
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
watch(valueHtml, (newValue) => {
    centent(newValue)
})
// 触发时机 ：当用户离开编辑页面或切换到其他组件时，销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})



</script>
<style scoped lang="less">
.toolbar {
    border-radius: @radius-s;
    background: @bg-color-l;
    width: 100%;
}

.istop {
    box-shadow: @shadow-m;

}

.editor_main {
    padding-top: @space-xl;
    width: 100%;
    margin-top: @space-s;
    border-radius: @radius-m;
    background: @bg-color-l;
    padding: @space-xl;
    display: flex;
    flex-direction: column;
    align-items: center
}

.edit {
    overflow-y: hidden;
    height: 500px;
    width: 90%;
    border-top: 2px solid @bg-color-m;
}
</style>